<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-20 flex v-align-c">
      <span></span>
      <i>热门搜索</i>
    </h2>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">精选热词({{ customPage.historyWords.hotWordsList.length }}/3)</h3>
      </div>
      <div class="border-box pad-t-3">
        <div v-for="(item, index) in customPage.historyWords.hotWordsList" :key="'btns-list-' + index">
          <div class="link-list-box">
            <div class="border-box btns-form flex v-align-c">
              <div class="pad-t-5 pad-b-7 flex-item">
                <el-form-item class="none-mar-b pad-b-10">
                  <el-input placeholder="最多8个字" class="mini-s-input" maxlength="8" v-model="item.hotWord"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="btn-edit-del selected">
              <div class="btn-del" @click="remove(customPage.historyWords.hotWordsList, index)">删除</div>
            </div>
          </div>
        </div>
        <div class="add-border-box mar-b-19" v-if="customPage.historyWords.hotWordsList.length < 3" @click="addHotWords">
          <span>+</span>
          <span>添加</span>
          <span>{{customPage.historyWords.hotWordsList.length}}/3</span>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">普通热词({{ customPage.historyWords.normalWordsList.length }}/6)</h3>
      </div>
      <div class="border-box pad-t-3">
        <div v-for="(item, index) in customPage.historyWords.normalWordsList" :key="'btns-list-' + index">
          <div class="link-list-box">
            <div class="border-box btns-form flex v-align-c">
              <div class="pad-t-5 pad-b-7 flex-item">
                <el-form-item class="none-mar-b pad-b-10">
                  <el-input placeholder="最多8个字" class="mini-s-input" maxlength="8" v-model="item.hotWord"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="btn-edit-del selected">
              <div class="btn-del" @click="remove(customPage.historyWords.normalWordsList, index)">删除</div>
            </div>
          </div>
        </div>
        <div class="add-border-box mar-b-19" v-if="customPage.historyWords.normalWordsList.length < 6" @click="addNormalWords">
          <span>+</span>
          <span>添加</span>
          <span>{{customPage.historyWords.normalWordsList.length}}/6</span>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
  export default {
    components: { },
    props: {
      customPage1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        customPage: {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          style: {},
          historyWords: {
            hotWordsList: [],
            normalWordsList: []
          },
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          pageTitle: '',
          titleFontColor: '#000000',
          titleBackgroundColor: '#FFFFFF',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF'
        },
        hotWordsList: [],
        normalWordsList: [],
        fullScreenLoading: null,
        activeIndex: 0
      }
    },
    // 初始化页面
    created() {
      this.customPage = this.customPage1
      const that = this
      this.$bus.$on('resetHistorySearch', function(data) {
        that.customPage.historyWords = data
      })
    },
    mounted() {
      this.initEls()
    },
    methods: {
      initEls() {
        // for (let i = 0; i < 2; i++) {
        //   this.addHotWords()
        //   this.addNormalWords()
        // }
      },
      addHotWords() {
        if (this.customPage.historyWords.hotWordsList.length < 3) {
          const addObj = {
            wordsId: '',
            hotWord: '',
            type: 2
          }
          this.customPage.historyWords.hotWordsList.push(addObj)
        }
      },
      addNormalWords() {
        if (this.customPage.historyWords.normalWordsList.length < 6) {
          const addObj = {
            wordsId: '',
            hotWord: '',
            type: 1
          }
          this.customPage.historyWords.normalWordsList.push(addObj)
        }
      },
      remove(data, index) {
        data.splice(index, 1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .add-border-box{
    border: 1px dashed #dee5ed;
    color: #9a9a9a;
  }
  .link-list-box{
    position: relative;
    /deep/ .el-input__inner{
      background: #fff!important;
    }
    /deep/ .el-color-picker__color{
      border: 1px solid #e0e5ea;
    }
    .mini-sbar-input{
      background: #fff!important;
    }
    .border-box{
      margin-bottom: 15px;
      background: #f6f7fb;
      border-radius: 0;
    }
    .btn-edit-del {
      width: 30px;
      height: 30px;
      overflow: hidden;
      position: absolute;
      right: -6px;
      top: -6px;
      display: block;
      z-index: 90;
      font-size: 14px;
      text-align: right;
      display: none;
      &.selected{
        display: block;
      }
    }
    .btn-edit-del > div {
      width: 16px;
      height: 16px;
      display: inline-block;
      text-indent: -100em;
      text-align: left;
      font-size: 10px;
      color: #333;
      cursor: pointer;
      position: relative;
      z-index: 11;
      background: url('@/../../../../../../assets/images/icons-close-2.png') no-repeat;
      background-size: 16px 16px;
    }
  }
  .tem-list{
    border: #f1f6fb 1px solid;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    li{
      padding: 23px 20px;
      &.actived{
        color: #409EFF;
        background: #f3f6ff;
      }
      .style-color{
        span{
          width: 24px;
          height: 24px;
          margin-left: 3px;
          display: inline-block;
          border-radius: 2px;
          position: relative;
          overflow: hidden;
        }
        &.style-10{
          span{
            &:nth-child(1){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(2){
              background: #ffe100;
              border: #ffe100 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #333333;
              border: #333333 1px solid;
            }
          }
        }
        &.style-11{
          span{
            &:nth-child(1){
              background: #0fa0fe;
              border: #0fa0fe 1px solid;
            }
            &:nth-child(2){
              background: #1e77f5;
              border: #1e77f5 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #1a98fc;
              border: #1a98fc 1px solid;
            }
          }
        }
        &.style-12{
          span{
            &:nth-child(1){
              background: #63df70;
              border: #63df70 1px solid;
            }
            &:nth-child(2){
              background: #1ebb1c;
              border: #1ebb1c 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #333333;
              border: #333333 1px solid;
            }
          }
        }
        &.style-13{
          span{
            &:nth-child(1){
              background: #f5cc93;
              border: #f5cc93 1px solid;
            }
            &:nth-child(2){
              background: #daac6f;
              border: #daac6f 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #f6e9d8;
              border: #f6e9d8 1px solid;
            }
          }
        }
        &.style-14{
          span{
            &:nth-child(1){
              background: #ffa201;
              border: #ffa201 1px solid;
            }
            &:nth-child(2){
              background: #ff7024;
              border: #ff7024 1px solid;
            }
            &:nth-child(3){
              background: #ffd247;
              border: #ffd247 1px solid;
            }
            &:nth-child(4){
              background: #ffa235;
              border: #ffa235 1px solid;
            }
          }
        }
        &.style-15{
          span{
            &:nth-child(1){
              background: #ff5a5e;
              border: #ff5a5e 1px solid;
            }
            &:nth-child(2){
              background: #ff2e35;
              border: #ff2e35 1px solid;
            }
            &:nth-child(3){
              background: #fff;
              border: #e5e5e5 1px solid;
              &:before{
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                width: 200%;
                height: 200%;
                border-left: #ED2727 1px solid;
                transform: rotate(45deg)
              }
            }
            &:nth-child(4){
              background: #333333;
              border: #333333 1px solid;
            }
          }
        }
      }
    }
  }
</style>